<template>
  <div class="m-auto w-1000px">
    <el-input
      v-model="form.keyword"
      @clear="get_news_list"
      class="input w-600px ml-200px mt-50px mb-20px"
      placeholder="请输入搜索内容"
      clearable
    >
      <template #suffix>
        <div class="search cursor-pointer" @click="get_news_list">搜索</div>
      </template>
    </el-input>
    <div class="flex flex-justify-center flex-items-center line-height-36px">
      <p class="text-#bb0615 text-center text-30px font-600 mt-30px mb-20px">
        - IP知识库 -
      </p>
    </div>
    <div>
      <div
        v-for="item in list"
        :key="item.id"
        class="flex flex-justify-between flex-items-center border line-height-42px cursor-pointer hover-text-#bb0615"
        @click="go_web(item.url || `/news_detail?id=${item.id}`)"
      >
        <p class="text-18px text-#242424 text-ellipsis hover-text-#bb0615">
          {{ item.title }}
        </p>
        <p class="text-#b5b5b5 text-16px">{{ item.ctime }}</p>
      </div>
    </div>
    <el-pagination
      class="flex flex-justify-center mt-50px"
      background
      layout="prev, pager, next"
      :total="list_total"
      :page-size="10"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { useRouter } from "vue-router";
import { news_list } from "@/api/index";

const form = reactive({
  keyword: "",
  page: 1,
  page_size: 10,
});
const list = ref([]);
const list_total = ref();
const $router = useRouter();

// watch(()=> form.keyword, ()=>{
//   get_news_list()
// })

const get_news_list = async () => {
  const {
    data: { data, total },
  } = await news_list(form);
  list.value = data;
  list_total.value = total;
};
get_news_list();

const go_web = (src) => {
  if (src.startsWith("http")) {
    window.open(src, "_blank");
  } else {
    $router.push(src);
  }
};

// 分页处理
const handleCurrentChange = (val) => {
  form.page = val;
  get_news_list();
  // document.querySelector("html").scrollTop = 0;
};
</script>

<style scoped>
.search {
  margin-right: -10px;
  width: 73px;
  height: 44px;
  background-color: #bb0615;
  border-radius: 22px;
  line-height: 42px;
  letter-spacing: 7px;
  color: #fcf7f7;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}
::v-deep .el-pager li.is-active {
  background-color: #bb0615 !important;
}
::v-deep .el-input__wrapper {
  width: 526px;
  border-radius: 22px;
}
::v-deep .el-input__wrapper.is-focus {
  box-shadow: 0 0 0 0.005208rem #c0c4cc inset;
}
::v-deep .el-pager li.is-active {
  background-color: #bb0615 !important;
}
.border {
  border-bottom: 1px solid #bababa;
}
.text-ellipsis {
  width: 750px; /* 设置元素宽度 */
  white-space: nowrap; /* 保持文本在一行内 */
  overflow: hidden; /* 隐藏溢出部分内容 */
  text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
}
</style>
